let box = document.querySelector(".box");
let nav = document.querySelector("nav");
let btn_nav = document.querySelector(".nav");
let tbody = document.querySelector("tbody");
let tfoot = document.querySelector("tfoot");
let add = document.querySelector(".add");
let double = document.querySelector(".double");
let query = document.querySelector(".query");
let list = document.querySelector(".list");
let total = document.querySelector(".total");
let flag = false;
let index = 0;
// 用来装添加用户的数据
let newData = [];
// 渲染函数
function BindHtml() {
    tbody.innerHTML = "";
    tfoot.innerHTML = "";
    newData.forEach(function (item) {
        let tr = document.createElement("tr");
        tbody.appendChild(tr);
        tr.innerHTML = `
        <td>${item.name}</td>
        <td>$${item.money.toLocaleString()}.00</td>`;
    })
}
let content = document.querySelector(".content");
content.addEventListener("click", function (e) {
    switch (e.target.className) {
        // 导航栏
        case "nav":
            flag = !flag;
            if (flag) {
                box.style.transform = `translate(200px)`;
                return;
            }
            box.style.transform = ``;
            break;
        // 添加用户
        case "add":
            if (index >= dataInfo.length) {
                return alert("没有更多的数据了");
            }
            newData[index] = dataInfo[index];
            BindHtml();
            index++;
            break;
        // 资金翻倍
        case "double":
            newData.forEach(function (item) {
                item.money *= 2;
            })
            BindHtml();
            break;
        // 查询百万富翁
        case "query":
            let millionData = newData.filter(function (item) {
                return item.money >= 1000000;
            })
            tbody.innerHTML = "";
            millionData.forEach(function (item) {
                let tr = document.createElement("tr");
                tbody.appendChild(tr);
                tr.innerHTML = `
                <td>${item.name}</td>
                <td>$${item.money.toLocaleString()}.00</td>`
            })
            break;
        // 财富榜
        case "list":
            for (let i = 0; i < newData.length - 1; i++) {
                for (let j = 0; j < newData.length - 1 - i; j++) {
                    if (newData[j].money < newData[j + 1].money) {
                        let tmp = newData[j];
                        newData[j] = newData[j + 1];
                        newData[j + 1] = tmp;
                    }
                }
            }
            BindHtml();
            break;
        // 计算总额
        case "total":
            let totalNum = 0;
            newData.forEach(function (item) {
                totalNum += item.money;
            })
            // 渲染总额
            tfoot.innerHTML = "";
            let tr = document.createElement("tr");
            tfoot.appendChild(tr);
            tr.innerHTML = `
            <td>Total sum:</td>
            <td>$${totalNum.toLocaleString()} .00</td>`
            break;
    }
})